<template>
	<view class="gy-steps" :style="{gridTemplateColumns: `repeat(${ props.list.length }, 1fr)`}">
		<view class="gy-steps-item" :class="{selected: props.current >= index}" v-for="(item,index) in props.list" :key="index">
			{{ item.name }}
			<text class="gy_icon_arrowRight"></text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	
	const props = defineProps({
		current: {
		    type: Number,
		    default: 0
		},
		list: {
			type: Array,
			default: () => []
		}
	});
	
</script>

<style lang="scss">
	.gy-steps{
		display: flex;
		justify-content: space-between;
		align-items: center;
		.gy-steps-item{
			position: relative;
			flex: 1;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 32rpx;
			padding: 0 20rpx;
			font-weight: 400;
			text{
				position: absolute;
				top: 40rpx;
				left: -14rpx;
				font-size: 28rpx;
			}
		}
		.gy-steps-item:first-child{
			text{
				display: none;
			}
		}
		.gy-steps-item.selected{
			font-weight: 600;
			color: var(--gy-color-primary);
		}
	}
	.gy_icon_arrowRight{
		color: #999;
	}
</style>